<template>
  <a-layout class="wrap">
    <div class="content">
      <div class="top">
        <div class="header">
          <img alt="logo" :src="logo" />
          <span>Administrator Panel</span>
        </div>
      </div>
      <div class="login">
        <a-form-model :form="form" @onSubmit='handlerLogin'>
          <a-form-model-item prop="account">
            <a-input placeholder="username" size="large" v-model="form.account" allowClear>
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,0.25)"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input placeholder="password" size="large" v-model="form.password" type="password" allowClear>
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,0.25)"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-checkbox v-model="form.remember">自动登录</a-checkbox>
            <a href="javascript;;" class="forget">联系管理员</a>
            <a-button size="large" type="primary">登录</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </a-layout>
</template>

<script>
import {login} from '@/api/common'
export default {
  name: "Login",
  data() {
    return {
      logo: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
      form : {
        account: "",
        password: "",
        remember: true
      },
      rules: {
        account: [
          {required: true, message:'请输入账号', trigger: 'blur'},
          // {min: 3, max: 20, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          {required: true, message:'请输入密码', trigger: 'blur'},
          // {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    console.log("111");
  },
  methods: {
    async handlerLogin() {
      console.log(11111)
      res = await login(form)
      console.log(res)
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  display: flex;
}
.content {
  flex: 1;
  padding: 112px 0 24px;
  .top {
    text-align: center;
  }
  .header {
    height: 44px;
    line-height: 44px;
    img {
      width: 44px;
      vertical-align: top;
      margin-right: 16px;
    }
    span {
      display: inline-flex;
      justify-content: center;
      font-family: Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif;
      font-weight: 600;
    }
    font-size: 33px;
  }
  .login {
    width: 368px;
    margin: 0 auto;
    margin-top: 60px;
    .forget {
      float: right;
    }
    button {
      width: 100%;
    }
  }
}
</style>